import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addPerson } from '../../redux/person/action'

class Person extends Component {

    addPerson = () => {
        const name = this.nameNode.value
        const age = +this.ageNode.value
        this.props.addPerson({ name, age })
    }

    render() {
        return (
            <div>
                <hr />
                <h2>Count组件求和为：{this.props.sum}</h2>
                <input ref={c => this.nameNode = c} type="text" placeholder="输入名字" />
                <input ref={c => this.ageNode = c} type="text" placeholder="输入年龄" />
                <button onClick={this.addPerson}>Add</button>
                <h3>PersonList:</h3>
                <ul>
                    {
                        this.props.personList.map((v, i) => {
                            return <li key={i}>{v.name}---{v.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    personList: state.person,
    sum: state.count
})

export default connect(
    mapStateToProps, // state
    { addPerson }, // actions
)(Person)